<template>
   <div>
       <!-- 下拉菜单  -->
        <van-dropdown-menu>
            <van-dropdown-item title="全部商品" disabled />
            <van-dropdown-item v-model="value2" :options="option2"
              title="价格排序" @change="prichChange"
             />
            <van-dropdown-item v-model="value3" :options="filterCategory" 
             title="分类" @change="categoryChange"
            />
        </van-dropdown-menu>
        <!-- 商品信息 -->
        <div class="con">
            <dl v-for="item in goodsList" :key="item.id" 
            @click="gotoDetail(item.id)">
                  <dt> <img :src="item.list_pic_url" alt=""></dt>
                  <dd>
                      <p>{{item.name}}</p>
                      <p style="color:red">{{item.retail_price | priceStyle}}</p>
                  </dd>
               </dl>
        </div>

   </div>
</template>

<script>
export default {
   props:["goodsList","filterCategory"],
   data() {
    return {
      
      value2: 'desc',
      value3:0,
      option2: [
        { text: '价格由高到底', value: 'desc' },
        { text: '价格由低到高', value: 'asc' },
      ],
    };
  },
  methods:{
     //价格排序
     prichChange(val){
         this.$emit("sortEvent",val)

     },
     //分类
     categoryChange(val){

         this.$emit("categoryEvent",val)
     },
     //跳转到详情页面
     gotoDetail(val){
        console.log(val)
        this.$router.push({path:"/detail",query:{id:val}})

     }

    
    
  }
}
</script>

<style lang="less" scoped>
   .con{width: 100%; display:flex; flex-wrap: wrap;
        justify-content: space-between; padding: 0 10PX;
        box-sizing: border-box;
        dl{width: 49%;margin-top:20PX;
           img{width: 100%;}
           p{line-height: 30PX;font-size: 16PX;}
         }
   
       }

</style>